<template>
    <div class="hot_read">
        <div class="hot_read_title">
            <el-image class="hot_icon" :src="hotIcon" fit="cover"></el-image>
            热门阅读
        </div>
        <div class="hot_read_list">
            <nuxt-link
                v-for="(item, index) in hotReadList"
                class="hot_read_item"
                :key="index"
                target="_blank"
                :to="getRoterLink(item)"
            >
                {{ item[titleKey] }}
            </nuxt-link>
        </div>
    </div>
</template>
<script>
import hotIcon from "@/assets/images/regulations/shouye_header_nav_hot.png";
export default {
    props: {
        hotReadList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        titleKey: {
            type: String,
            default: "title",
        },
        toType: {
            type: String,
            default: "Quiz",
        },
    },
    data() {
        return {
            hotIcon: hotIcon,
            getRoterLink: function (item) {
                switch (this.toType) {
                    case "Quiz": // 问题库
                        return `/quizdata/${item.id}`;
                    case "ssfgk": // 税收法规库
                        return `/ssfgk/${item.id}.html`;
                    case "kjfgk": // 会计法规库
                        return `/kjfgk/${item.id}.html`;
                    default:
                        return "/";
                }
            },
        };
    },
    methods: {},
    created() {},
    mounted() {},
    watch: {},
};
</script>
<style lang="scss" scoped>
.hot_read {
    width: 100%;
    margin-top: 15px;
    background-color: #fff;
    position: sticky;
    top: 448px;

    .hot_read_title {
        padding: 20px;
        font-size: 18px;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 17px;
        border-bottom: 1px solid #eaeaea;

        .hot_icon {
            width: 14px;
            height: 17px;
        }
    }

    .hot_read_list {
        margin-top: 22px;
        padding: 0 20px 20px;

        .hot_read_item {
            display: block;
            box-sizing: border-box;
            margin-bottom: 3px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 40px;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            //多行文本溢出显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*设置对齐模式*/
            -webkit-line-clamp: 1;
            /*设置多行的行数，示例为1行*/

            &:hover {
                color: #1c87f3;
            }

            &::before {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #d8d8d8;
                margin-right: 14px;
            }
        }
    }
}
</style>